<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #bigBox {
            width: 200px;
            height: 200px;
            background-color: red;
            overflow-y: scroll;
        }
        #smallBox {
            border-top:5px;
            padding-top:10px;
            background-color: blue;

        }
    </style>
</head>
<body>
<div id="bigBox">
    <div id="smallBox">
        scrollHeight scrollHeight1
        scrollHeight scrollHeight2
        scrollHeight scrollHeight3
        scrollHeight scrollHeight4
        scrollHeight scrollHeight5
        scrollHeight scrollHeight6
        scrollHeight scrollHeight7
        scrollHeight scrollHeight8
        scrollHeight scrollHeight9
        scrollHeight scrollHeight10
        scrollHeight scrollHeight11
        scrollHeight scrollHeight12
        scrollHeight scrollHeight13
    </div>
</div>
<script>
    var big = document.getElementById('bigBox');
    var small = document.getElementById('smallBox');
    setInterval(function(){
       // console.log('small高度：'+small.offsetHeight);
        //console.log('small完全高度：'+small.scrollHeight);
        console.log('big高度：'+big.offsetHeight);
        console.log('big完全高度：'+big.scrollHeight);
        console.log('距父元素的距离：'+big.scrollTop);
    },2000);
</script>
</body>
</html>